<template>
    <el-form style="width: 60%" :model="updateForm" ref="editForm" :rules="updateRules" label-width="100px" class="demo-ruleForm">
        <!-- 编号-->
        <el-form-item prop="id" label="编号:">
            <el-input v-model="updateForm.id" :disabled="true"></el-input>
        </el-form-item>
        <!-- 姓名-->
        <el-form-item prop="name" label="姓名:">
            <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <!-- 年龄-->
        <el-form-item prop="age" label="年龄:">
            <el-input v-model="updateForm.age"></el-input>
        </el-form-item>
        <!-- 性别-->
        <el-form-item prop="sex" label="性别:">
            <el-select v-model="updateForm.sex" placeholder="性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
            <!--            <el-input v-model="updateForm.sex" prefix-icon="iconfont icondenglu"></el-input>-->
        </el-form-item>
        <!-- 部门-->
        <el-form-item prop="department" label="部门:">
            <el-select v-model="updateForm.department" placeholder="请选择">
                <el-option
                        v-if="item.value"
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <!-- 电话-->
        <el-form-item prop="phone" label="电话:">
            <el-input v-model="updateForm.phone"></el-input>
        </el-form-item>
        <!-- 邮箱-->
        <el-form-item prop="email" label="邮箱:">
            <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <!-- 用户名-->
        <div :model="updateUser">
            <el-form-item prop="username" label="用户名:">
                <el-input v-model="updateUser.username" :disabled="true"></el-input>
            </el-form-item>
            <!-- 密码-->
            <el-form-item prop="password" label="密码:">
                <el-input v-model="updateUser.password"></el-input>
            </el-form-item>
        </div>
        <div class="button" style=
                "display: flex;
         justify-content: flex-end;">
            <el-button @click="update('editForm')" type="success">修改</el-button>
            <el-button @click="reset()" type="info">重置</el-button>
        </div>
    </el-form>
</template>

<script>
    export default {
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-100的整数'))
                } else {
                    callback()
                }
            };
            var list=[];
            for(let i=0;i<20;i++){
                list[i]={
                    value: null,
                    label: null,
                }
            }
            return {
                options: list,

                //表单数据
                updateForm: {
                    id: null,
                    name: null,
                    age: null,
                    sex: null,
                    department: null,
                    phone: null,
                    email: null,
                },
                updateUser: {
                    username: null,
                    password: null,
                },
                //验证对象
                updateRules: {
                    name:[
                        //必填项
                        { required: true,message: "请输入员工姓名",trigger: "change"},
                        { min: 2, max: 30, message: "长度在 2 到 10 个字符", trigger: "change" },
                    ],
                    age:[
                        { required: true,message: "请输入员工年龄",trigger: "change"},
                        { validator:isPercent}
                    ],
                    phone:[
                        { required: true,message: "请输入员工电话",trigger: "change"},
                        { min: 5, max: 11, message: "长度在 5 到 11 位", trigger: "change" },
                        {validator:isNum}
                    ],
                    email:[
                        { required: true,message: "请输入员工邮箱",trigger: "change"},
                        {type:'email',message:"邮箱格式错误",trigger: "change"}
                    ],
                },
            };
        },
        methods: {
            update(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$http.post("worker/update", this.updateForm)
                            this.$http.post("login/update", this.updateUser)
                            window.sessionStorage.clear();//清除session
                            this.$router.push("/login");
                            this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                }
                            );
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            });
                        });
                    }else{
                        this.$message.error("信息填写错误")
                    }
                })
            },
            reset() {
                location.reload()
            },
        },
        created() {
            const _this = this
            document.onkeydown = function(e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.update();
                }
            }
            this.$http.post("department/findAllDepartment").then(function (resp) {
                for (let i = 0; i < resp.data.length; i++) {
                    _this.options[i].value = resp.data[i].name
                    _this.options[i].label = resp.data[i].name
                }
            })
            _this.updateForm.id = JSON.parse(window.sessionStorage.getItem("UserId"))
            this.$http.post("worker/findByName", window.sessionStorage.getItem("name")).then(function (resp) {
                _this.updateForm = resp.data.data[0]
                _this.updateUser.username = JSON.parse(window.sessionStorage.getItem("user")).username
                _this.updateUser.password = JSON.parse(window.sessionStorage.getItem("user")).password
            })
        }
    }
</script>
